<template>
  <div class="newpage">
    <div class="newpage_title">
      <div class="nav-left">
        <img class="company-logo" src="../../../styles/logo.svg" alt="" />
        证书列表
      </div>
      <div class="nav-center">
        <!-- <iconSvg name="g6change" w="25" style="color:#fff;margin-left: 8px;" @click.native="backToG6page('g6')"></iconSvg> -->
      </div>
      <div class="nav-right">
        <iconSvg
          name="home"
          w="20px"
          h="22px"
          class="right_icon"
          @click.native="backToHomepage"
        ></iconSvg>
      </div>
    </div>
    <Application></Application>
    <div class="newpage_work">
      <div class="newpage_work_bottom" v-if="statusIndex === 1">
        <div class="not-content">
          <img src="/static/img/zwlr-icon.png" />
          <div class="title">暂无数据</div>
        </div>
      </div>
      <div class="newpage_work_bottom" v-else-if="statusIndex === 2">
        <div class="not-content">
          <img src="/static/img/zwlr-icon.png" />
          <div class="title">暂无数据</div>
        </div>
      </div>
      <div class="newpage_work_bottom" v-else-if="statusIndex === 3">
        <div class="newpage_work_conent" v-if="certificateData.length">
          <div
            class="card"
            v-for="(item, index) in certificateData"
            :key="index"
            @click="certificateDetail(item.id)"
          >
            <div class="bg">
              <div class="header">
                <div class="title">
                  {{ item.name }}
                </div>
                <span :class="{ gz: item.willExpiredDays < 30 && item.status != 2 }">{{
                  item.willExpiredDays | willExpiredDays(item.status)
                }}</span>
              </div>
              <div class="numberRow">
                有效期：
                {{ item.effectiveDate }} ~ {{ item.expirationDate }}
              </div>
            </div>
          </div>
        </div>

        <div class="not-content" v-else>
          <img src="/static/img/zwlr-icon.png" />
          <div class="title">暂无数据</div>
        </div>
        <div
          class="newpage_work_more"
          v-if="showMore"
          @click="getCertificateMore"
        >
          查看更多
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { Privilege } from "@/mixin";
import { Tab, TabItem, Toast, InlineLoading, Datetime } from "vux";
import Application from "@/components/common/application";
import SafetyManageDao from "@/daos/safety_manage_dao";
export default {
  name: "earlywrning",
  components: {
    Tab,
    TabItem,
    Toast,
    InlineLoading,
    Application,
    Datetime
  },
  data() {
    return {
      statusIndex: 3,
      showMore: false,
      certificateData: [],
      certificateAuth: false,
      position: "middle",
      pageSize: 10,
      pageNum: 1,
      total: 0,
      store: {
        id: 0
      }
    };
  },
  mixins:[Privilege],
  created() {
    // this.certificateAuth = this.privilege("wechat_safetyManage", "证书查看");
    // if (!this.certificateAuth) {
    //   this.$commom.alert("您暂无查看安全证书权限，请联系管理员。", "提示", {
    //     confirmButtonText: "确定",
    //     callback: () => {}
    //   });
    // }
  },
  //返回首页的公共方法
  inject: ["backToHomepage",'backToG6page'],
  mounted() {
    // if (this.certificateAuth) {
      // this.getCertificateList();
    // }
  },
  filters: {
    willExpiredDays(val, status) {
      if (status == 2) {
        return "已失效";
      } else if(val === 0){
        return "今天到期"
      } else {
        return val > 0 ? `${val}天后到期` : `已过期${-val}天`;
      }
    }
  },
  activated() {
    // if (this.certificateAuth) {
      this.getCertificateList();
    // }
  },
  computed: {
    user() {
      if (!this.$store.state.user) {
        this.$store.commit(
          "saveUser",
          JSON.parse(localStorage.getItem("user"))
        );
      }
      return this.$store.state.user;
    }
  },
  methods: {
    init() {},
    handler(e) {
      this.pageNum = 1;
      this.pageSize = 10;

      this.statusIndex = e;
    },
    getCertificateMore() {
      this.pageNum++;
      this.getCertificateList();
    },
    getCertificateList() {
      let params = {
        orgId: this.user.org.id,
        pageSize: this.pageSize,
        pageNum: this.pageNum
      };
      SafetyManageDao.getCertificateList(params, res => {
        if (this.pageNum === 1) {
          this.certificateData.splice(0, this.certificateData.length);
        }
        if (res.content && res.content.length) {
          this.certificateData.push(...res.content);
        }
        this.total = res.total;
        this.showMore = !(!res.totalPages || this.pageNum === res.totalPages);
      });
    },
    certificateDetail(id) {
      this.store.id = id;
      this.$router.push({
        name: "certificate_manage",
        query: {
          id: id
        }
      });
    }
  }
};
</script>
<style lang="less">
.newpage_tab {
  .vux-tab {
    height: 45px !important;
    background: #1b1c32;
    .vux-tab-item {
      background: none;
      color: #fff;
    }
  }
}
#app,
.content {
  height: 100%;
}
</style>
<style lang="less" scoped>
.report_time {
  font-size: 12px;
  color: #ffffff59;
}
.newpage {
  height: 100vh;
  background: #1b1c32;
  overflow-y: scroll;
}
.none_conent {
  text-align: center;
  color: gray;
  /* height:30px;
    line-height:30px; */
  border-bottom: none !important;
}
.newpage_work_more {
  height: 40px;
  font-size: 12px;
  line-height: 40px;
  text-align: center;
  color: #456de6;
}
.newpage_work_second {
  color: #456de6;
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}
.newpage_work_ul {
  display: flex;
  justify-content: space-between;
}
.newpage_work_span {
  font-size: 12px;
  color: #456de6;
}
// .early-type{

// }
.urgent-priority,
.early-type-err {
  color: red;
}
.vital-priority,
.early-type-warning {
  color: #d98806;
}

.newpage_work_li {
  font-size: 12px;
  flex: 1;
  span {
    display: inline-block;
    &:nth-child(1) {
      height: 18px;
      text-align: center;
      line-height: 18px;
      // background:#456de6;
      margin-right: 9px;
    }
    &:nth-child(2) {
      width: 80%;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      vertical-align: middle;
    }
  }
}
.newpage_work_conent {
  color: #fff;
  background: #1b1c32;
  padding: 8px;
  .card {
    margin-bottom: 12px;
    text-align: left;
    padding: 0;
    .bg {
      background: #292a4d;
      border-radius: 4px;
      transition: 0.3s all ease-in-out;
      &.active1 {
        background: #383a69;
      }
      .header {
        color: #fff;
        font-size: 17px;
        padding: 0 8px;
        line-height: 38px;
        position: relative;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        .more {
          display: inline-block;
          color: #456de6;
        }
        span {
          line-height: 40px;
          font-size: 15px;
          display: inline-block;
          position: absolute;
          top: 0;
          right: 8px;
          &.and {
            color: red;
            padding-top: 2.5px;
          }
          &.gz {
            color: #ff2c2c;
          }
          &.wjk {
            color: rgba(255, 255, 255, 0.6);
          }
          &.tz {
            color: #4fdbe5;
          }
          &.lx {
            color: #dd9710;
          }
          &.yz {
            color: #456de6;
          }
        }
      }
      .title {
        line-height: 40px;
        &.and {
          padding-top: 3px;
        }
      }
      .numberRow {
        line-height: 38px;
        font-size: 16px;
        padding: 0 8px;
        color: rgba(255, 255, 255, 0.6);
        &.and {
          padding-top: 2.5px;
          padding-bottom: 0.5px;
        }
      }
    }
  }
}
.not-content {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
  img {
    width: 64px;
    height: 64px;
    margin-left: 20px;
  }
  .title {
    margin: 8px auto;
    width: 126px;
    height: 40px;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(158, 198, 251, 1);
    line-height: 20px;
    text-align: center;
  }
}
.newpage_title {
  height: 44px;
  background: #18182c;
  padding: 0 15px;
  display: flex;
  span {
    display: inline-block;
    color: #ffff;
    font-size: 15px;
    vertical-align: middle;
  }
  .nav-left {
    display: flex;
    align-items: center;
    color: #fff;
    font-size: 16px;
    .company-logo {
      height: 100%;
      width: 48px;
    }
  }
  .nav-center {
    flex: 1;
    line-height: 44px;
    text-align: center;
    font-size: 16px;
    color: #fff;
  }
  .nav-right {
    margin-top: 12px;
    width: 36px;
    height: 100%;
    display: flex;
    justify-content: flex-end;
    .paidan {
      margin-top: -8px;
      i {
        font-size: 26px;
      }
    }
  }
  .nav_border_left {
    border-left: 2px solid #fff;
    height: 20px;
  }
}
</style>
